<template>
  <div class="village-dialog">
    <el-dialog @closed="handleDialogClose" :visible="visible">
      <div class="panelWrap unit-container">
        <div class="title flex flexac flexjcsb fs14 cfff fwb pl p-r-20">
          <div>添加小区</div>
          <i class="el-icon-close" @click="handleCloseDialog" />
        </div>
        <div class="con flexcenter flexdc ibk">
          <div class="con-row flex flexdc pl">
            <div class="flex">
              <div class="inputLable inputLable1 flex ">
                <span class="name texttr"><span class="mustval">*</span>地产品牌：</span>
                <el-input readonly v-model="form.landBrandName" class="input" placeholder="请选择地产品牌" />
                <el-button @click="showLand" icon="el-icon-thumb" type="primary">选择地产品牌</el-button>
              </div>
            </div>
            <div class="flex m-t-20">
              <div class="inputLable inputLable1 flex ">
                <span class="name texttr"><span class="mustval">*</span>小区名称：</span>
                <el-input v-model="form.name" class="input" placeholder="请输入小区名称" />
              </div>
            </div>
            <div class="flex m-t-20">
              <div class="inputLable inputLable1 flex ">
                <span class="name texttr"><span class="mustval">*</span>小区简称：</span>
                <el-input v-model="form.nameSimple" class="input" placeholder="请输入小区名称" />
              </div>
            </div>
            
            <div class="inputLable inputLable2 flex  m-t-20">
              <span class="name texttr"><span class="mustval">*</span>小区备注：</span>
              <el-input type="textarea" v-model="form.remark" class="input" placeholder="备注" />
            </div>

            <div class="inputLable inputLable2 flex  m-t-30">
              <span class="name texttr"><span class="mustval">*</span>小区图片：</span>
              <el-upload
                class="upload-demo"
                ref="upload"
                :http-request="upload"
                action=""
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :on-change="handleChange"
                :file-list="fileList"
                :auto-upload="false"
                :limit="1"
                list-type="picture">
                <el-button slot="trigger" size="small" type="primary">选取图片</el-button>
                <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
              </el-upload>
            </div>
            
          </div>
        </div>

        <div class="flex flexcenter m-b-40 m-t-35">
          <el-button v-if="!isEdit" class="saveBtn btn m-r-30 el-icon-circle-check" @click="handleSave(0)">保 存</el-button>
          <el-button v-else type="success" class="btn m-r-30 el-icon-circle-check" @click="handleSave(1)">更 新</el-button>
          <el-button class="clsoeBtn btn el-icon-circle-close" @click="handleCloseDialog">关 闭</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog class="landDialog" title="选择广告" :visible.sync="dialoglandBrand">
      <el-table :max-height="500" id="landList" ref="landList" class="con-table" type="expand" :data="landList" @select="handleCheck2" @select-all="handleCheck2">
        <el-table-column width="50" type="selection" label="全选" />

        <el-table-column align="center" label="地产品牌ID">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="名称">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="品牌简称">
          <template slot-scope="scope">
            <span>{{ scope.row.nameSimple }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="备注">
          <template slot-scope="scope">
            <span>{{ scope.row.remark }}</span>
          </template>
        </el-table-column>

      </el-table>
      <el-pagination class="paginationWrap flex" :current-page="paging.currentPage" :page-sizes="paging.pageSizeArr" :page-size="paging.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="paging.total" @size-change="handleSizeChange2" @current-change="handleCurrentChange2" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialoglandBrand = false">取 消</el-button>
        <el-button type="primary" @click="confirmLand">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { createAdd, updateArticle, villageUpload } from '@/api/baseInfo/village'
import { fetchList } from '@/api/baseInfo/landbrand'
import { showNotice, randomString } from '@/utils/toolclass'
// import uploadImg from '@/components/uploadImg'
// import city from '@/components/city'

export default {
  name: 'UnitSelectDialog',
  // components: {
  //   uploadImg, city
  // },
  props: {
    data: {
      type: Object,
      default: () => ({})
    },
    isEdit: {
      type: Boolean
    },
    value: {
      type: Boolean
    }
  },
  data() {
    return {
      villageId:'',
      fileList:[],
      villagePic:null,
      paging: {
        currentPage: 1,
        pageSize: 10,
        pageSizeArr: [10, 20, 50, 100],
        total: 0
      },
      landName:'',
      dialoglandBrand:false,
      selectLand:'',
      landList:[],
      visible: false,
      form: { ...this.data },
      formOrigin: {
        name: '',
        nameSimple: '',
        socialCreditCode: '',
        chargePerson: '',
        businessLicenseCode: '',
        chargePersonPhone: '',
        securityPerson: '',
        securityPersonPhone: '',
        remark: '',
        version: ''
      },
      codechange: false

    }
  },
  computed: {
    // getName: function() {
    //   return this.form.name
    // }
  },
  watch: {
    visible(v) {
      this.$emit('input', v)
    },
    value(v) {
      this.visible = v
    },
    data(v) {
      if(v.villagePicId){
        this.fileList = [{
          name:'',
          url:v.villagePic
        }]
      }else{
        this.fileList= []
      }
      
      if (v.id === 0) {
        this.form = { ...this.formOrigin }
      } else {
        this.form = { ...v }
      }
    }
    // getName: {
    //   handler(val, oldVal) {
    //     // console.log(val, oldVal)
    //     this.form.nameSimple = this.form.name
    //   },
    //   immediate: true
    // }
  },
  created() { },
  mounted() { },
  methods: {
    // 弹出框关闭回调
    handleDialogClose(){
      // 清除上传文件数组
      this.$refs.upload.clearFiles();
    },
    upload(){
      const formData = new FormData()
      formData.append('id ', this.villageId)
      formData.append('villageFile', this.villagePic)
      villageUpload(formData).then(res=>{
        if(res.code === '000000'){
          showNotice('success', '提示', '图片上传成功')
          this.$refs.upload.clearFiles();
          this.$emit('handleRefresh')
          this.$emit('handleCloseDialog')
        }else{
          showNotice('error', '提示', res.msg)
        }
      })
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleChange(file, fileList){
      this.villagePic = file.raw;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    confirmLand(){
      this.dialoglandBrand = false;
      this.form.landBrandName = this.selectLand.name;
      this.form.landBrandId = this.selectLand.id
    },
    showLand(){
      this.dialoglandBrand = true;
      this.getLandList()
    },
    getLandList(){
      fetchList('', '', this.paging.currentPage, this.paging.pageSize).then(res=>{
        if(res.code === '000000'){
          this.landList = res.data;
          this.paging = {
            currentPage: res.pager.pageIndex,
            pageSize: res.pager.pageSize,
            total: res.pager.totalSize
          }
        }else{
          showNotice('error', '提示', res.msg)
        }
      })
    },
    handleCheck2(selection, row) {
      this.$refs.landList.clearSelection()
      this.$refs.landList.toggleRowSelection(row,true)
      this.selectLand = row;
    },
    handleSizeChange2(val) {
      this.paging.pageSize = val
      this.getLandList()
    },
    handleCurrentChange2(val) {
      this.paging.currentPage = val
      this.getLandList()
    },
    setCodestr() {
      const code = ('0000' + randomString(14)).toLocaleUpperCase()
      // console.log(code)

      this.form.socialCreditCode = code
      if (this.codechange) {
        this.form.socialCreditCode = ''
      }
      this.codechange = !this.codechange
    },
    handleUpdate() {
      updateArticle(this.form).then((res) => {
        if (res.code === '000000') {
          if(this.villagePic){
            this.villageId = res.data.id;
            this.submitUpload()
          }else{
            this.$emit('handleRefresh')
            this.$emit('handleCloseDialog')
          }
          showNotice('success', '提示', '更新成功')
        } else {
          showNotice('error', '提示', res.msg)
        }
      })
    },

    handleSave(type) {
      if (!(/^\S+$/.test(this.form.landBrandId))) {
        showNotice('error', '提示', '请选择地产品牌')
        return
      }

      if (!(/^\S+$/.test(this.form.name))) {
        showNotice('error', '提示', '小区名称不能为空')
        return
      }

      if (!(/^\S+$/.test(this.form.nameSimple))) {
        showNotice('error', '提示', '小区简称不能为空')
        return
      }


      if (type === 0) {
        this.handleAdd()
      } else {
        this.handleUpdate()
      }
    },
    handleCloseDialog() {
      this.$emit('handleCloseDialog')
    },
    handleAdd() {
      createAdd(this.form).then((res) => {
        if (res.code === '000000') {
          if(this.villagePic){
            this.villageId = res.data.id;
            this.submitUpload()
          }else{
            this.$emit('handleRefresh')
            this.$emit('handleCloseDialog')
          }
          showNotice('success', '提示', '保存成功!')
        } else {
          showNotice('error', '提示', res.msg)
        }
      })
    }
  }

}
</script>

<style rel='stylesheet/scss' lang='scss'>
@import "@/styles/addtable.scss";
@import "@/styles/public.scss";
.landDialog{
  .el-dialog{
    width: 50%;
  }
  .el-dialog__headerbtn{
    display: block;
  }
  .el-pagination{
    background: #fff;
    padding: 10px;
  }
  .el-dialog__header{
    height: auto;
    padding: 20px 20px 10px
  }
  .el-dialog__body{
    height: auto;
  }
  .el-dialog__footer{
    background: #fff;
    padding: 10px 20px;
  }
}
.village-dialog {
  .unit-container {
    width: 800px;
    background: #ffffff;
    margin-left: -200px;
    .el-upload-list {
      min-width: 345px;
    }
    .con {
      margin-top: 30px;
      .con-row {
        padding: 15px 0px;
      }
      .setCodestr {
        margin-left: 120px;
        .set-input {
          width: 230px;
        }
      }
      .input {
        width: 250px;
        height: 36px;
      }
    }
    .inputLable input {
      width: 450px;
    }
    .inputLable .name {
      width: 190px !important;
      padding-right: 20px;
    }
  }
}
</style>
